<template>
  <div class="employees">
    <el-card>
      <page-tools :show-left="false">
        <template #right>
          <div>
            <!-- 自定义指令 -->
            <!-- <el-button
              v-visible-button="'aa'"
              type="primary"
              @click="goUpload"
            >导入</el-button> -->

            <!-- mixin混入 -->
            <!-- <el-button
              v-if="formButton('aa')"
              type="primary"
              @click="goUpload"
            >导入</el-button> -->

            <el-button
              v-if="$store.state.user.userInfo.roles.points.includes('aa')"
              type="primary"
              @click="goUpload"
            >导入</el-button>
            <el-button type="primary" @click="AddOpen">+ 新增员工</el-button>
          </div>
        </template>
      </page-tools>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table :data="list">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <!-- 真实页码={当前页数-1X当前页码大小+$index+1} -->
            <span>
              {{ (page.page - 1) * page.size + $index + 1 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="员工头像" prop="username">
          <template v-slot="{ row }">
            <div class="avatar">
              <img
                v-imgerror="defaultImg"
                :src="row.staffPhoto"
                alt=""
                @click="imgClick(row.staffPhoto)"
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="mobile" />
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="聘用方式" prop="formOfEmployment">
          <template v-slot="{ row }">
            <div v-formatterFormof="row.formOfEmployment" /></template></el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column
          label="入职日期"
          prop="timeOfEntry"
          :formatter="formatterTimeOfEntry"
        />
        <el-table-column label="操作" prop="">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="look(row)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="roleEvent(row)">角色</el-button>
              <el-button type="text" @click="del(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[1, 3, 10, 100, 200, 300, 400]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <add ref="add" @getData="getData" />
    <!-- 二维码头像 -->
    <el-dialog title="二维码" :visible.sync="showQrcode">
      <div style="text-align: center"><canvas ref="cavans" /></div>
    </el-dialog>
    <Role ref="role" v-model="showRole" />
  </div>
</template>

<script>
// employeesapi导入
import { sysUser, sysUserDelete } from '@/api/employees'
// 页码组件
import pageTools from '@/components/lib/pageTools.vue'
// 子组件导入
import Add from './components/add.vue'
// 时间处理
import dayjs from 'dayjs'
// 自定义生成二维码
import Qrcode from 'qrcode'
// 导入role组件
import Role from './components/role.vue'
export default {
  components: { pageTools, Add, Role },
  data() {
    return {
      showRole: false,
      showQrcode: false,
      defaultImg: require('@/assets/common/head.jpg'),
      list: [],
      page: {
        page: 1,
        size: 10,
        total: 100
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 每页的条数
    handleSizeChange(val) {
      this.page.pagesize = val
      this.page.page = 1
      this.getData()
      console.log(`每页 ${val} 条`)
    },
    // 当前页
    handleCurrentChange(val) {
      this.page.page = val
      this.getData()
      console.log(`当前页: ${val}`)
    },
    // 渲染页面
    async getData() {
      const res = await sysUser(this.page)
      this.page.total = res.data.total
      this.list = res.data.rows
      console.log(res.data.rows, '员工模块')
    },
    // 打开新增员工界面
    AddOpen() {
      this.$refs.add.dialogVisible = true
    },
    // formatter(row, column, cellValue, index) {
    //   const temp = employeesData.hireType.find((item) => {
    //     return item.index === cellValue
    //   })
    //   return temp ? temp.value : '-'
    // },

    // 日期格式化
    formatterTimeOfEntry(row, colum, cellValue, index) {
      // console.log(cellValue)
      return dayjs(cellValue).format('YYYY-MM-DD')
    },
    // 删除事件
    del(row) {
      this.$confirm('确定删除改员工吗?', '提示').then(async() => {
        await sysUserDelete(row.id)
        this.$message.success('删除成功')
        this.handleCurrentChange(1)
      })
    },
    // 页面更新
    goUpload() {
      this.$router.push('/employees/upload?name=' + encodeURIComponent('员工'))
    },
    // 页面初始化渲染
    look(row) {
      this.$router.push('/employees/detail/' + row.id)
    },
    // 图片点击
    imgClick(imgSrc) {
      if (!imgSrc) {
        return
      }
      this.showQrcode = true
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.cavans, imgSrc, { width: 600, height: 600 })
      })
    },
    roleEvent(row) {
      this.showRole = true
      this.$refs.role.getUserInfo(row.id)
    }
  }
}
</script>

<style lang="scss">
.employees {
  padding: 15px;
  .page {
    margin-top: 20px;
    text-align: right;
  }
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      cursor: pointer;
    }
  }
}
</style>
